import React from 'react';
import { render } from 'react-dom';

import { Tag, Modal, Tooltip, Button, Select, Input } from 'antd';
import { WebTool } from '../lib/webtool';

import { MainMyItemsDetailComponent } from './main.myItemsDetail';

const {TextArea} = Input;

export class ItemDetailView extends React.Component {
    constructor(props) {
        super();
        this.state.heigth = props.heigth;

        this.state.isLogin = props.isLogin;
        this.state.itemData = props.itemData;
    }

    state = {
        previewVisible: false,
        width: null,
        height: null,
        isLogin: false,
        itemData: {},

        addItem: {
            title: 'addItem',
            close: this.addItemModalClose,
            visible: false
        },
        offer: {
            data:[],
            visible: false,
            value: '',
            detail: ''
        }
    };

    addItemModalClose = (success)=>{
        this.setState({ addItem: { visible: false } });

        if (success === true) {
            WebTool.get('/main/getMyItems?pageIndex=1&pageSize=1000', data => {
                this.setState({ offer: { data: data.list, visible: true } });
            });
        }
    };

    openModal = () => {
        this.setState({
            modalVisible: true,
        });
    }

    handleCancel = () => this.setState({ previewVisible: false });

    viewDetail = () => {
        if (!this.state.isLogin) {
            WebTool.info("Please login, then view detail!");
            return;
        }
        this.setState({ previewVisible: true });
    };

    makeOffice = () => {
        this.setState({ offer: { visible: true } }, () => {

            WebTool.get('/main/getMyItems?pageIndex=1&pageSize=1000', data => {
                if (this.props.suggestItemId) {
                    this.setState({ offer: { data: data.list, visible: true } }, () => {
                        this.setState({ offer: { data: data.list, visible: true, value: parseInt(this.props.suggestItemId)} });
                    });
                } else {
                    this.setState({ offer: { data: data.list, visible: true } });
                }
            });
        });
        // WebTool.success('asdasds');
        // this.setState({addItem:{visible:true}});
    };

    // 
    saveSwap = ()=>{
        let swapItemId = this.state.offer.value;

        if(!swapItemId){
            WebTool.info('Please choose your item to swap!');
            return;
        }

        WebTool.post('/main/swapItem', {
            targetItemId: this.props.itemData.id,
            offerItemId: swapItemId,
            offerDetail: this.state.offer.detail
        }, () => {
            this.setState({ previewVisible: false });
            this.setState({ offer: { visible: false } });
            WebTool.success('Make an office success');
        });
    };

    render() {
        const { previewVisible, heigth } = this.state;
        let thumbnailStyle = { cursor: "pointer" };
        if (heigth) {
            thumbnailStyle.height = heigth + "px";
        } else {
            thumbnailStyle.width = "100%";
        }

        return (
            <div>
                <img alt="thumbnail" src={this.state.itemData.thumbnail} style={thumbnailStyle} onClick={this.viewDetail} title="view large picture" />
                {this.state.isLogin ? (
                    <div>
                    <Modal title={`【${this.state.itemData.name}】Detail`} width={1000}
                        visible={previewVisible} footer={null} onCancel={this.handleCancel} centered destroyOnClose>
                        <pre style={{ paddingBottom: "5px", marginTop: "-15px" }}>{this.state.itemData.description}</pre>
                        <div style={{ fontWeight: "bolder", paddingBottom: "5px" }}>
                            Want swap items:
                        </div>
                        <div style={{ paddingBottom: "5px" }}>
                            {this.state.itemData.swapItems.length > 0 ? (this.state.itemData.swapItems.map((tag, index) => {
                                const isLongTag = tag.length > 20;
                                const tagElem = (
                                    <Tag key={tag} closable={false}>
                                        {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                                    </Tag>
                                );
                                return isLongTag ? (
                                    <Tooltip title={tag} key={tag}>
                                        {tagElem}
                                    </Tooltip>
                                ) : (
                                        tagElem
                                    );
                            })) : ("empty")}
                        </div>
                        
                        <Button type="primary" onClick={this.makeOffice} style={{ position: "absolute", right: "25px", top: "65px" }}>make an offer</Button>

                        <img alt="example" style={{ width: '100%' }} src={this.state.itemData.photo} />
                    </Modal>

                        <Modal title="To swap my item" visible={this.state.offer.visible} onCancel={() => this.setState({ offer: { visible: false } })}
                            onOk={this.saveSwap} destroyOnClose>
                            <div>
                                SwapItems:
                              <Select
                                    onChange={(value) => this.setState({offer:{ data: this.state.offer.data , value:value, visible: true}})}
                                    value={ this.state.offer.value}
                                    style={{ width: 300 }}
                                    placeholder="choose your item to swap">
                                    {(this.state.offer.data || []).map(item => (
                                        <Select.Option value={item.id} key={item.id} title={item.description}><img src={item.thumbnail}
                                            style={{ height: "30px", verticalAlign: "-9px", marginRight: "5px" }}></img>{item.name}</Select.Option>
                                    ))}
                                </Select>

                                <Button type="default" shape="round" icon="plus" size="default" onClick={() => this.setState({ addItem: { visible: true } })} />
                            </div>
                            <div>
                                detail: 
                                <TextArea rows={4} onChange={e=>{this.state.offer.detail=e.target.value}}/>
                            </div>
                        </Modal>
                    

                    <MainMyItemsDetailComponent onClose={this.addItemModalClose} title={this.state.addItem.title || 'detail'} visible={this.state.addItem.visible}></MainMyItemsDetailComponent>
                    </div>
                ) : ("")}
            </div>
        );
    };
}
